<template>
    <div>
        <header class="tc w100">
            <div class="title pr pr20 pl20">
                <img @click="detail" class="pa" src="../../../assets/img/home-img/left-arrows.png">
                <h1 class="f35 cfff fn"></h1>
            </div>
        </header>
        <main>
            <div class="tc code">
                <h2 class="f30 fn">核销码：<span class="f25">12312312</span></h2>
                <img src="../../../assets/img/home-img/bg.png" alt="">
            </div>
            <div class="wash-info">
                <h1 class="fn f30">维修信息</h1>
                <div>
                    <p>维修单号:<span>{{listTable.idnum}}</span></p>
                    <p>维修状态:<span>进行中</span></p>
                    <p>车主姓名:<span>{{ listTable.principal }}</span></p>
                    <p>联系方式:<span>{{listTable.tel}}</span></p>
                    <p>维修方式:<span>换机油</span></p>
                    <p>取车位置:<span>山阳区32号</span></p>
                    <p>预约日期:<span>2023</span></p>
                    <p>提交日期:<span>2023</span></p>
                </div>
            </div>
            <div class="car-info">
                <h1 class="fn f30">维修信息</h1>
                <div>
                    <p>车辆信息:<span>大客车</span></p>
                    <p>车牌号:<span>豫J23123</span></p>
                    <p class="car-img">整车照片:</p>
                    <img src="../../../assets/img/home-img/bg.png" alt="">
                    <p class="car-img">维修部位图片:</p>
                    <img src="../../../assets/img/home-img/bg.png" alt="">
                    <img src="../../../assets/img/home-img/bg.png" alt="">
                    <img src="../../../assets/img/home-img/bg.png" alt="">
                </div>
            </div>
            <p style="height: 1rem; margin-top: -178rem;"></p>
        </main>
        <footer class="tr bcfff pf">
            <button class="tc cfff" @click="cancelOrder">取消订单</button>
        </footer>
    </div>
</template>
<script>
export default {
    data(){
        return{
            listTable:{}
        }
    },
    mounted(){
        this.listTable = this.$route.query.el;
    },
    methods: {
        cancelOrder() {
            this.$dialog.confirm({
                title: '确认取消预约吗',
                confirmButtonColor: '#2377f3',
                // width: '710rem'
            })
            .then(() => {
                console.log('确认');
            })
            .catch(() => {
                console.log('取消');
            });
        },
        detail(){
            this.$router.push('myWash')
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}


header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  img{height: 36rem;width: auto;left: 20rem;top: 50%;margin-top: -18rem;}

main {
    height: 1100rem;
    padding: 0 20rem;
}

main>div {
    z-index: 0;
    position: relative;
    top: -290rem;
    border-radius: 20rem;
    background-color: #fff;
    margin-bottom: 20rem;
}

main .code {
    padding: 36rem 0 42rem 0;
}

main .code h2 {
    margin-bottom: 24rem;
}

main .code h2 span {
    color: #333;
}

main .code img {
    width: 178rem;
    height: 178rem;
}

main .wash-info {
    padding: 24rem 48rem 34rem 35rem;
}

main .wash-info h1,
main .car-info h1 {
    padding-bottom: 16rem;
    border-bottom: 7rem solid #f7f7f7;
}

main .wash-info p {
    margin-top: 24rem;
    padding: 0 15rem;
    font-size: 23rem;
}

main .wash-info p span {
    float: right;
    color: #adadad;
}

main .car-info {
    padding: 34rem 35rem 14rem 20rem;
}

main .car-info h1 {
    margin-bottom: 24rem;
}

main .car-info>div {
    padding: 0 15rem;
}

main .car-info p {
    font-size: 23rem;
    margin-bottom: 30rem;
}

main .car-info p span {
    float: right;
    color: #adadad;
}

main .car-info .car-img {
    margin-bottom: 16rem;
}

main .car-info img {
    width: 150rem;
    height: 150rem;
    vertical-align: middle;
    margin-bottom: 26rem;
    margin-right: 24rem;
}

footer {
    padding: 25rem 30rem;
    bottom: 0;
    width: 100%;
}

footer button {
    width: 190rem;
    height: 65rem;
    background-color: #1c70ef;
    border-radius: 40rem;
    border: 0;
    font-size: 24rem;
}</style>